<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'dorm.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	
	<script type="text/javascript" src="./js/jquery-1.8.0.min.js"></script>
	<style type="text/css">
		td,th{
			height: 30px;
			text-align: center;
		}
		.bedroomTable th{
			background-color: #CCCCCC;
		}
		.bedroomTable{
			margin-left:13%;
			margin-top:5px;
			margin-bottom:15px;
			width:74%;
			background-color: #f8f8f8;
			text-align: center;
		}
		#infomation{
			text-decoration: none;
		}
	</style>
	<SCRIPT type="text/javascript">
		$(function(){
			
		});
		function showInfomation(e){
			$("a[showInfo='true']").each(function(i,d){
				hideInfomation(d);
			});
			
			var e = e||event;
			var a = e.srcElement||e.target;
			var id=Number(a.getAttribute("pid"));
			var tr = a.parentNode.parentNode;
			var table = document.getElementById("dromTable");
			var row = table.insertRow(tr.rowIndex+1);
			var cell = row.insertCell(0);
			cell.colSpan = "4";
			cell.innerHTML = "正在查询...";
			$.ajax({
				type:"post",
				url:"dorm/dorm!selectBedroom.action",
				data:{id:Number(id),n:Math.random()},
				success:function(message){
					cell.innerHTML=message;
				}
			});
			a.innerHTML="隐藏详细>>";
			a.onclick = hideInfomation;
			$(a).attr("showInfo","true");
		}
		function hideInfomation(e){
			var e = e||event;
			var a = e.srcElement || e.target||e;
			var tr = a.parentNode.parentNode;
			var table = document.getElementById("dromTable");
			table.deleteRow(tr.rowIndex+1);
			a.innerHTML="展开详细>>";
			a.onclick = showInfomation ;
			$(a).attr("showInfo","false");
		}
	</SCRIPT>

  </head>
  
  <body>
    <table border="1" cellpadding="0" cellspacing="0" width="50%" id="dromTable">
  	  	<tr><th>名称</th><th>宿舍类别</th><th>详细地址</th><th>查看</th></tr>
  	  	<s:iterator value="#request.listDorm" var="d">
  	  		<tr>
  	  			<td>${d.name}</td>
  	  			<td>
  	  				${d.gender==1?"女生宿舍":"男生宿舍"}
  	  			</td>
  	  			<td>${d.addr}</td>
  	  			<td><a href="javascript:void(0)" showInfo="false" onclick="showInfomation(event)" pid="${d.id}" id="infomation">展开详细>></a></td>
  	  		</tr>
  	  	</s:iterator>
  	  </table>
  </body>
</html>
